<template>
	<u-tabbar
		:value="current"
		@change="changeTabbar"
		zIndex="9999"
		inactiveColor="#909193"
		activeColor="#E9930A"
	>
		<u-tabbar-item text="首頁" :name="1">
			<image
				class="u-page__item__slot-icon"
				slot="inactive-icon"
				mode="aspectFit"
				src="../../static/tabbar/home.png"
			></image>
			<image
				class="u-page__item__slot-icon"
				slot="active-icon"
				mode="aspectFit"
				src="../../static/tabbar/home_cur.png"
			></image>
		</u-tabbar-item>
		<u-tabbar-item text="課程" :name="2">
			<image
				class="u-page__item__slot-icon"
				slot="inactive-icon"
				mode="aspectFit"
				src="@/static/tabbar/order.png"
			></image>
			<image
				class="u-page__item__slot-icon"
				slot="active-icon"
				mode="aspectFit"
				src="@/static/tabbar/order_cur.png"
			></image>
		</u-tabbar-item>
		<u-tabbar-item text="我的" :name="3">
			<image
				class="u-page__item__slot-icon"
				slot="inactive-icon"
				mode="aspectFit"
				src="@/static/tabbar/my.png"
			></image>
			<image
				class="u-page__item__slot-icon"
				slot="active-icon"
				mode="aspectFit"
				src="@/static/tabbar/my_cur.png"
			></image>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script>
export default {
	props: {
		current: Number
	},
	methods: {
		changeTabbar(e) {
			switch(Number(e)) {
				case 1:
					this.$navigator('/pages/home/index', 'switchTab')
					break
				case 2:
					this.$navigator('/pages/course/index', 'switchTab')
					break
				case 3:
					this.$navigator('/pages/mine/index', 'switchTab')
					break
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.u-page__item__slot-icon {
		width: 55rpx;
		height: 45rpx;
	}
</style>
